<template>
  <div class="ct-pagination">
    <el-pagination
      :layout="options.layout"
      :total="options.total"
      :current-page="pageOptions.currentPage"
      :page-size="pageOptions.pageSize"
      :page-sizes="options.pageSizes"
      :pager-count="options.pagerCount"
      :disabled="options.disabled"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange">
    </el-pagination>
  </div>

</template>

<script>
  export default {
    name: 'CtPagination'
  };
</script>
<script setup>
  const props = defineProps({
    options: {
      type: Object,
      required: true
    },
    pageEvent: {
      type: Function,
      default: () => {}
    }
  });

  let pageOptions = ref(props.options);

  // 处理改变当前页
  function handleCurrentChange(currentPage) {
    pageOptions.value.currentPage = currentPage;
    props.pageEvent();
  }

  // 处理改变每页条数
  function handleSizeChange(pageSize) {
    pageOptions.value.currentPage = 1;
    pageOptions.value.pageSize = pageSize;
    props.pageEvent();
  }
</script>

<!-- <script>
  export default {
    name: 'BgyPagination',
    props: {
      options: {
        type: Object,
        required: true
      },
      pageEvent: {
        type: Function,
        default: () => {}
      }
    },
    data() {
      return {
        pageOptions: this.options
      };
    },
    methods: {
      // 处理改变当前页
      handleCurrentChange(currentPage) {
        this.pageOptions.currentPage = currentPage;
        this.pageEvent();
      },
      // 处理改变每页条数
      handleSizeChange(pageSize) {
        this.pageOptions.currentPage = 1;
        this.pageOptions.pageSize = pageSize;
        this.pageEvent();
      }
    }
  };
</script> -->

<style lang="scss" scoped>
  .ct-pagination {
    display: flex;
    justify-content: flex-end;
    padding-top: 20px;
  }
</style>
